<template>
	<el-container>
		<el-main>
			<el-row>

				<el-row :gutter="20">
					<el-col :span="8">
						<el-input placeholder="请输入文章标题" v-model="title" />
					</el-col>
					<el-col :span="8">
						<el-select style="width: 100%" size="medium" value-key="id" v-model="categoryId"  placeholder="请选择文章分类">
							<el-option v-for="t in categories" :key="t.id" :label="t.name" :value="t.id">
							</el-option>
						</el-select>
					</el-col>
					<!-- 作者 -->
					<el-col :span="8">
						<el-select style="width: 100%" size="medium" value-key="id" v-model="userId"  placeholder="请选择文章作者">
							<el-option v-for="t in users" :key="t.id" :label="t.nickname" :value="t.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="24" style="margin-top: 10px">
						<mavon-editor style="height: 500px" v-model="content" />
					</el-col>
				</el-row>
				<el-col :span="24">
					<div class=""></div>
				</el-col>
				<el-col :span="24" style="margin-top: 10px">
					<el-card>
						<el-row type="flex" align="middle" justify="space-between">
							<el-col :span="6">
								<el-checkbox :true-label="1" :false-label="0" v-model="comment">是否开启评论</el-checkbox>
							</el-col>
							<el-col :span="8">
								<el-button type="info" @click="toBack()">返回列表</el-button>
								<el-button type="primary" @click="save('publish')">保存文章</el-button>
								<el-button type="success"  @click="saveToDraft('draft')">存为草稿</el-button>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
	import ArticleApi from '@/api/article'
	import CategoryApi from '@/api/category'
	import {getAllUsers} from '@/api/user'
	export default {
		name: 'index',
		inject: ['reload'],
		data() {
			return {
				
				title: '',
				aid:0,
				content: '',
				comment: 0,
				id:this.$route.query.id,
				categories: [{
				            id: '1',
				            name: 'Java'
				          },
				          {
				            id: '2',
				            name: 'PHP'
				          }
				        ],

				users: [],
				selectTypes:[],
				categoryId:null,
				userId:null
			}
		},
		created() {
			this.getAllCategory()
			this.getUsers()
			let id = this.$route.query.id;
			if (id != null) {
				this.getArticle(id)
			}
		},
		methods: {
			getAllCategory() {
				CategoryApi.getAllCategory().then(resp => {
					var list1 = resp.data
					this.categories=list1
				})
			},
			// 获取所有用户
			getUsers(){
				getAllUsers().then(resp=>{
					this.users=resp.data
					
				})
			},
			getArticle(id) {
				ArticleApi.getArticlesById(id).then(resp => {
					console.log(resp.data)
					var article = resp.data
					this.content = article.content
					this.title = article.title
					this.comment=article.allowComment
					console.log(this.comment);
					this.categoryId = article.categoryId	
					this.userId = article.userId	
				})
			},
			// 提交新增文章
			save(status) {
				var new_id=0;
				if(this.id == undefined){
					//console.log(111111);
				     new_id === null
				}else{
					new_id=this.id
				}
				
				let articleList = {
					"title": this.title,
					"content": this.content,
					"allowComment": this.comment,
					"categoryId": this.categoryId,
					"userId":this.userId,
					"status":status,
					"id":new_id
				}
				// console.log(articleList.categoryId)
				// // console.log(articleList.id);
				// console.log(articleList.title)
				// console.log(articleList.content)
				// console.log(articleList.status)
				// console.log(articleList.categoryId)
				// console.log(articleList.userId)
				
				
				ArticleApi.addArticle(articleList).then(resp => {
					//提示信息
					this.$message({
						message: "保存成功",
						type: "success"
					})
					this.$router.push({path:'/article/index'})
				})
				

			},
			saveToDraft(status) {
				var new_id=0;
				if(this.id == undefined){
				     new_id === 0
				}else{
					new_id=this.id
				}
				
				let articleList = {
					"title": this.title,
					"content": this.content,
					"allowComment": this.comment,
					"categoryId": this.categoryId,
					"userId":this.userId,
					"status":status,
					"id":new_id,
				}
				// console.log(articleList.categoryId)
				// // console.log(articleList.id);
				// console.log(articleList.title)
				// console.log(articleList.content)
				// console.log(articleList.status)
				// console.log(articleList.categoryId)
				// console.log(articleList.userId)
				
				ArticleApi.addArticle(articleList).then(resp => {
					//提示信息
					this.$message({
						message: "已成功存为草稿",
						type: "success"
					})
					this.$router.push({path:'/article/index'})
				})
				
			
			},
			toBack(){
				this.$router.push({path:'/article/index'})
			}
		},
	}
</script>

<style></style>
